<template>
  <div class="box">
    <div class="wrap"
         ref="warp"
         :style="{width:size*0.8+'px',height:size*0.8+'px'}">
      <div class="ball"
           ref="ball"
           @mouseenter="handleMouse(true)"
           @mouseleave="handleMouse(false)"
           v-for="index of ballNum"
           :key="index"
           :style="compute(index)">{{index}}</div>
      <div class="center"
           ref="centerBall"></div>
      <div class="circle_wrap"
           ref="centerWrap"
           :style="{width:size*0.7+'px',height:size*0.7+'px'}">
        <div class="circle-1">
          <div class="circle-2">
            <div class="circle-3">
              <!-- <div class="circle-4">
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  props: {
    size: {
      type: Number,
      default: 500,
    },
    ballNum: {
      type: Number,
      default: 5,
    },
    ballWidth: {
      type: Number,
      default: 50,
    }
  },
  data () {
    return {
      dotLeft: 0,
      dotTop: 0,
      // 创建一个场景
      scene: null,
      // 创建一个相机
      camera: null,
      // 创建一个渲染器
      renderer: null,
      // 模型对象
      mesh: null,
      // 平面
      plane: null,
      // 点光源
      point: null,
      // step
      step: 0,
      controls: null,
      earthOptions: {
        //imgEarth: 'assets/images/earth_bg.jpg',//地球贴图
        imgEarth: '../../../assets/img/earth.jpg',//地球贴图
        // imgSky: './1318258354-58acfc2a92c1c.jpg',//深空背景
        autorotationSpeed: 0,//自转速度（正数自西向东转，负数为逆向）
        cameraZ: 200,//摄像头高度,
        earthBallSize: 30//地球大小
      }
    }
  },
  mounted () {
    // this.ThreeJSEarth(this.$refs.content, this.earthOptions)
  },
  methods: {
    handleMouse (flag) {
      console.log(flag)
      if (flag) {
        console.log(this.$refs.ball)
        this.$refs.warp.style.animationPlayState = 'paused'
        this.$refs.ball.forEach(item => {
          item.style.animationPlayState = 'paused'
        })
        this.$refs.centerBall.style.animationPlayState = 'paused'
        this.$refs.centerWrap.style.animationPlayState = 'paused'
      } else {
        this.$refs.warp.style.animationPlayState = 'running'
        this.$refs.ball.forEach(item => {
          item.style.animationPlayState = 'running'
        })
        this.$refs.centerBall.style.animationPlayState = 'running'
        this.$refs.centerWrap.style.animationPlayState = 'running'
      }
    },
    compute (index) {
      //环绕半径
      let radius = (this.size * 0.8) / 2
      //计算小球left和top的值
      let dotLeft = (this.size * 0.8 - this.ballWidth) / 2
      let dotTop = (this.size * 0.8 - this.ballWidth) / 2
      let startAngle = 0
      let avd = 360 / this.ballNum + startAngle;
      let ahd = avd * Math.PI / 180
      let left = Math.sin((ahd * index)) * radius + dotLeft;
      let top = Math.cos((ahd * index)) * radius + dotTop;
      return `left:${left}px;top:${top}px;width:${this.ballWidth}px;height:${this.ballWidth}px;line-height:${this.ballWidth}px`;
    },
    initThree () {
      var earthOptions = {
        //imgEarth: 'assets/images/earth_bg.jpg',//地球贴图
        imgEarth: '../../../assets/img/earth.jpg',//地球贴图
        // imgSky: './1318258354-58acfc2a92c1c.jpg',//深空背景
        autorotationSpeed: 0,//自转速度（正数自西向东转，负数为逆向）
        cameraZ: 200,//摄像头高度,
        earthBallSize: 30//地球大小
      };
      new this.ThreeJSEarth("divEarth", earthOptions);
    },
    ThreeJSEarth (content, earthOptions) {
      // 初始化容器
      console.log(content.clientWidth)
      var _imgSky = earthOptions.imgSky ? earthOptions.imgSky : "";
      content.style.background = "url(" + _imgSky + ") no-repeat center center";
      content.style.backgroundColor = "#00000000";
      // var width = content.ele.style.width
      // var height = content.ele.style.height
      // 创建一个场景
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color("transparent");
      // 创建几何体
      var geometry = new THREE.SphereGeometry(earthOptions.earthBallSize, 50, 50);
      // 纹理加载器 （ 此处加载贴图 ）
      var texture = new THREE.TextureLoader().load(require('../../../assets/img/earth.jpg'));
      // 几何体材质对象
      var material = new THREE.MeshLambertMaterial({
        map: texture
      });
      // 创建网格模型对象
      this.mesh = new THREE.Mesh(geometry, material);
      //设置几何体位置
      this.mesh.position.x = 0;
      this.mesh.position.y = 0;
      this.mesh.position.z = 0;
      this.mesh.layers.set(0);
      this.scene.add(this.mesh);

      // 创建点光源
      var point = new THREE.PointLight("#FFF");
      point.position.set(40, 200, 30);
      this.point = point;
      this.scene.add(point);

      const sphereSize = 10;
      const pointLightHelper = new THREE.PointLightHelper(point, sphereSize);
      // this.scene.add(pointLightHelper);

      //创建环境光
      var ambient = new THREE.AmbientLight(0x444444);
      this.scene.add(ambient);

      // 创建一个相机
      this.camera = new THREE.PerspectiveCamera(
        20,
        content.clientWidth / content.clientHeight,
        1,
        10000
      );
      this.camera.position.set(0, 0, earthOptions.cameraZ ? earthOptions.cameraZ : 200);
      this.camera.lookAt(0, 0, 0);

      // // 坐标轴辅助器，X,Y,Z长度30
      // var axes = new THREE.AxesHelper(300);
      // this.scene.add(axes);
      // // 辅助网格
      // let gridHelper = new THREE.GridHelper(100, 100);
      // this.scene.add(gridHelper);

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
      });
      this.renderer.setSize(content.clientWidth, content.clientHeight);
      // this.renderer.setClearColor(0xb9d3ff, 1);
      this.renderer.autoClear = false;

      // console.log("1111", OrbitControls)
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      // 使动画循环使用时阻尼或自转 意思是否有惯性
      this.controls.enableDamping = true;
      // 自动旋转（地球自转）
      this.controls.autoRotate = true;
      //插入 dom 元素
      content.appendChild(this.renderer.domElement);
      this.controls.addEventListener("resize", this.render(), false);
    },
    render () {
      this.scene.rotation.y += this.earthOptions.autorotationSpeed ? this.earthOptions.autorotationSpeed : 0;
      this.renderer.render(this.scene, this.camera);
      // 自动旋转动画
      this.mesh.rotateY(0.01);
      requestAnimationFrame(this.render);
    }
  }
}
</script>
 
<style scoped>
@keyframes wrapr {
  0% {
    transform: translateX(-50%) translateY(-50%) perspective(600px)
      rotateX(80deg) rotateY(30deg) rotateZ(0deg) translateZ(0);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) perspective(600px)
      rotateX(80deg) rotateY(30deg) rotateZ(-360deg) translateZ(0);
  }
}
@keyframes ballr {
  0% {
    transform: rotateX(-80deg) rotateY(0deg) rotateZ(-20deg);
  }
  100% {
    transform: rotateX(-80deg) rotateY(-360deg) rotateZ(-20deg);
  }
}
@keyframes centerBallr {
  0% {
    transform: translateX(-50%) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: translateX(-50%) rotateX(-90deg) rotateY(-360deg) rotateZ(360deg);
  }
}
@keyframes centerWrap {
  0% {
    transform: translateX(-50%) translateY(-50%) rotateX(0deg)
      perspective(600px);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotateX(0deg)
      perspective(600px);
  }
}

.box {
  width: 600px;
  height: 600px;
  background: rgb(2, 2, 38);
  position: relative;
}

.wrap {
  width: 320px;
  height: 320px;
  position: absolute;
  left: 50%;
  top: 50%;
  /* box-shadow: inset 0 0 10px skyblue; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  animation: wrapr 10s linear 0s normal none infinite;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.ball {
  /* width: attr(ballWidth);
  height: attr(ballWidth); */
  border-radius: 50%;
  background: radial-gradient(circle at 70px 70px, #fff, RGBA(74, 172, 232, 0.5));
  position: absolute;
  top: -25px;
  left: calc(50% - 25px);
  text-align: center;
  line-height: 50px;
  color: white;
  animation: ballr 10s linear 0s normal none infinite;
}

.ball:hover{
  cursor: pointer;
  transition: 0.5s;
  background: radial-gradient(circle at 70px 70px,#fff , RGBA(218, 156, 77, 1));
  box-shadow: 0 30px 50px rgba(0,0,0,0.3);
}

@-webkit-keyframes shake {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  50% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes up-hide {
  0% {
    transform: scale(0.8) translateZ(0px);
  }
  100% {
    transform: scale(0.8) translateZ(200px);
  }
}

.circle_wrap {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  /* transform: translateX(-50%) translateY(-50%) perspective(600px) rotateX(80deg); */
  box-shadow: inset 0 0 30px skyblue;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: centerWrap 10s linear 0s normal none infinite;
}

.circle-1,
.circle-2,
.circle-3,
.circle-4 {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 30px skyblue;
  position: relative;
}

.center {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: url(../../../assets/img/earth.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  /* transform: translateX(-50%) rotateX(-80deg); */
  animation: centerBallr 10s linear 0s normal none infinite;
}

.circle_wrap {
  /* animation: shake 3s linear 0s normal none infinite; */
}

.circle-1 {
  animation: shake 3s linear 0.3s normal none infinite;
}

.circle-2 {
  animation: shake 3s linear 0.6s normal none infinite;
}

.circle-3 {
  animation: shake 3s linear 0.9s normal none infinite;
}

.circle-4 {
  animation: up-hide 0.5s linear 1.2s normal none infinite;
}
</style>